<template>
  <view class="logistics">
    <view class="logistics_info">
      <view class="logistics_info_img">
        <image :src="printOrder.showImage" />
      </view>
      <view class="logistics_info_con">
        <view class="logistics_info_con1">
          物流状态
          <view class="logistics_info_status" :class="getClassByState()">
            {{ stateList[printOrder.sendStatus] }}
          </view>
        </view>
        <view class="logistics_info_con2">快递方式：{{ printOrder.expressCompany }}</view>
        <view class="logistics_info_con2">运单编号：{{ printOrder.expressNo }}</view>
      </view>
    </view>
    <view class="logistics_list">
      <view class="logistics_list_info">
        <view class="logistics_list_user">
          <image class="logisticsIcon" src="../../static/my/logistics.png"></image>
          <view class="logistics_list_text">收货人：{{ printOrder.consignee || '未知' }}</view>
        </view>
        <view class="logistics_list_text">{{ printOrder.phone || '电话号暂无' }}</view>
      </view>
      <view class="logistics_list_address">{{ printOrder.area }}{{ printOrder.address || '地址未知' }}</view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';

onLoad((opt)=>{
  printOrder.value = JSON.parse(opt.data);
})
// 订单详情
const printOrder = ref({});
// 运输状态
const stateList = reactive(['待发货', '运输中', '已签收']);
// 根据状态返回class
function getClassByState() {
  if(printOrder.value.sendStatus == 0) {
    return 'logistics_info_status1'
  }else if(printOrder.value.sendStatus == 1) {
    return 'logistics_info_status2'
  }
  return '';
}
</script>

<style lang="scss" scoped>
.logistics {
  background-color: #f5f5f5;
  box-sizing: border-box;
  padding: 32rpx 0;
  min-height: 100vh;
}
.logistics_info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 32rpx;
}
.logistics_info_img {
  display: inline-block;
  width: 138rpx;
  height: 186rpx;
  image {
    width: 100%;
    height: 100%;
  }
}
.logistics_info_con {
  display: grid;
  grid-auto-rows: report(4, 1fr);
  height: 186rpx;
  width: calc(100% - 158rpx);
}
.logistics_info_con1 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 32rpx;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 46rpx;
  color: rgba(56, 56, 56, 1);
}
.logistics_info_con2 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 24rpx;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 34rpx;
  color: rgba(166, 166, 166, 1);
}
.logistics_info_status {
  margin-left: 20rpx;
  color: rgba(166, 166, 166, 1);
}
.logistics_info_status1 {
  color: rgba(69, 145, 230, 1);
}
.logistics_info_status2 {
  color: rgba(67, 207, 124, 1);
}
.logistics_list {
  margin-top: 20rpx;
  background-color: #ffffff;
  padding: 32rpx;
}
.logistics_list_info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logistics_list_user {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .logisticsIcon {
    margin-right: 6rpx;
    width: 20rpx;
    height: 24rpx;
  }
}
.logistics_list_text {
  font-size: 28rpx;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 40rpx;
  color: rgba(56, 56, 56, 1);
}
.logistics_list_address {
  margin-top: 10rpx;
  text-align: center;
  font-size: 24rpx;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 24rpx;
  color: rgba(166, 166, 166, 1);
}
</style>